import React from 'react';
import {injectIntl, language} from './intl';
import PropTypes from 'prop-types';
import {Form, Row, Modal, Col, Card, Button, Table, Popconfirm} from 'antd';
import {TABLE, FIXED_COLUMN_WIDTH} from '../constants';
import TextInput from 'Shared/components/TextInput';
import WrappedSelect from '../common/WrappedSelect';
const FormItem = Form.Item;
import {isTorF} from '../Enum';
const autosize = {minRows: 1};
import {uuid, validateAdd} from './utils';
import styles from './style.css';
const isTorFList = isTorF.toList(language);
const formItemL = {
    labelCol: {
        xxl: {span: 5},
        xl: {span: 10},
        md: {span: 9}
    },
    wrapperCol: {
        xxl: {span: 19},
        xl: {span: 24},
        md: {span: 15}
    }
};
const formItemR = {
    labelCol: {
        xxl: {span: 5},
        xl: {span: 10},
        md: {span: 9}
    },
    wrapperCol: {
        xxl: {span: 19},
        xl: {span: 24},
        md: {span: 15}
    }
};
const formColL = {
    xl: 16,
    md: 12
};
const formColR = {
    xl: 16,
    md: 12
};
class ModeEdit extends React.PureComponent {
    static getDerivedStateFromProps(props, state) {
        if(state.isDefault && props.showPanel)
            return {
                rowVersion: props.detail.rowVersion,
                id: props.detail.id,
                isDefault: false,
                questionContent: props.detail.questionContent,
                code: props.detail.code,
                enQuestionContent: props.detail.enQuestionContent,
                esQuestionContent: props.detail.esQuestionContent,
                ruQuestionContent: props.detail.ruQuestionContent,
                arQuestionContent: props.detail.arQuestionContent,
                ukQuestionContent: props.detail.ukQuestionContent,
                faQuestionContent: props.detail.faQuestionContent,
                description: props.detail.description,
                enDescription: props.detail.enDescription,
                esDescription: props.detail.esDescription,
                ukDescription: props.detail.ukDescription,
                ruDescription: props.detail.ruDescription,
                arDescription: props.detail.arDescription,
                faDescription: props.detail.faDescription,
                isCheck: props.detail.isCheck || true,
                details: props.detail.details
            };
        if(!props.showPanel)
            return {
                loading: false,
                id: '',
                questionContent: '',
                code: '',
                enQuestionContent: '',
                esQuestionContent: '',
                ruQuestionContent: '',
                ukQuestionContent: '',
                arQuestionContent: '',
                faQuestionContent: '',
                description: '',
                enDescription: '',
                esDescription: '',
                ukDescription: '',
                ruDescription: '',
                arDescription: '',
                faDescription: '',
                isCheck: true,
                isDefault: true,
                details: []
            };
        return null;
    }
    state = {
        loading: false,
        questionContent: '',
        code: '',
        enQuestionContent: '',
        esQuestionContent: '',
        ruQuestionContent: '',
        ukQuestionContent: '',
        arQuestionContent: '',
        faQuestionContent: '',
        description: '',
        enDescription: '',
        esDescription: '',
        ukDescription: '',
        ruDescription: '',
        arDescription: '',
        faDescription: '',
        isCheck: true,
        details: [],
        isDefault: true
    };
    componentDidMount() {
        this.ismounted = true;
    }
    componentWillUnmount() {
        this.ismounted = false;
        Modal.destroyAll();
    }
    
    handleFilterChange = (value, name) => {
        this.setState({
            [name]: value,
        });
    }
    handleFilterDetailChange = (value, name, id) => {
        const details = this.state.details || [];
        const tmp = details.map(d => {
            if(d.id === id)
                return Object.assign({}, d, {
                    [name]: value
                });
            return d;
        });

        this.setState({
            details: tmp,
            hasOperat: true
        });
    }

    onCancel = () => {
        this.setState({
            loading: false,
            questionContent: '',
            code: '',
            enQuestionContent: '',
            esQuestionContent: '',
            ruQuestionContent: '',
            ukQuestionContent: '',
            arQuestionContent: '',
            faQuestionContent: '',
            description: '',
            enDescription: '',
            esDescription: '',
            ukDescription: '',
            ruDescription: '',
            arDescription: '',
            faDescription: '',
            isCheck: true,
            isValidate: false,
            details: [],
        });
    }
    onSubmit = () => {
        const {id,
            questionContent,
            code,
            enQuestionContent,
            esQuestionContent,
            ruQuestionContent,
            arQuestionContent,
            ukQuestionContent,
            faQuestionContent,
            description,
            enDescription,
            esDescription,
            ukDescription,
            ruDescription,
            arDescription,
            faDescription,
            isCheck,
            rowVersion} = this.state;
        const isValid = validateAdd(this.state, this.state.details);
        if(!isValid) {
            this.setState({
                isValidate: true
            });
            return;
        }
        this.setState({
            loading: true
        });
        return this.props.onSubmit({
            id,
            questionContent,
            code,
            enQuestionContent,
            esQuestionContent,
            ruQuestionContent,
            arQuestionContent,
            ukQuestionContent,
            faQuestionContent,
            description,
            enDescription,
            esDescription,
            ukDescription,
            ruDescription,
            arDescription,
            faDescription,
            isCheck,
            rowVersion,
            details: this.state.details
        }).then(() => {
            this.setState({
                loading: false,
                isValidate: false,
            });
        });
    }
    onDeleteAll = () => {
        this.setState({
            details: [],
            hasOperat: true
        });
    }
    onDeleteDetail = e => {
        const id = e.target.dataset.id;
        const tmp = this.state.details.filter(d => d.id !== id);
        this.setState({
            details: [...tmp],
            hasOperat: true
        });
    }
    onClickAddDetailBtn = () => {
        const details = this.state.details || [];
        this.setState({
            details: [
                ...details,
                {
                    id: uuid(),
                }
            ],
            hasOperat: true
        });
    };
    render() {
        const {formatMessage} = this.props.intl;
        const details = this.state.details && this.state.details.map((p, i) => Object.assign({}, p, {
            serialNumber: i + 1,
        }));
        const colums = [{
            title: <span className="ant-form-item-required">{formatMessage({
                id: 'modeEdit.column.serialNumber',
                defaultMessage: '序号'
            })}</span>,
            dataIndex: 'serialNumber',
        },
        {
            title: <span className="ant-form-item-required">{formatMessage({
                id: 'modeEdit.column.optionName',
                defaultMessage: '选项名称'
            })}</span>,
            dataIndex: 'optionName',
            render: (text, record) => {
                const validate = (!text) && this.state.isValidate ? {validateStatus: 'error'} : null;
                return (
                    <FormItem {...validate}>
                        <TextInput
                            name="optionName"
                            value={record.optionName}
                            onChange={value => this.handleFilterDetailChange(value, 'optionName', record.id)} />
                    </FormItem>);
            }
        },
        {
            title: details && details.length > 0
                ? (
                    <Popconfirm placement="topRight" title={formatMessage({
                        id: 'modeEdit.column.allDelete',
                        defaultMessage: '是否确认全部删除？'
                    })} onConfirm={this.onDeleteAll} >
                        <a>{formatMessage({
                            id: 'modeEdit.column.empty',
                            defaultMessage: '清空'
                        })}</a>
                    </Popconfirm>
                )
                : <a>{formatMessage({
                    id: 'modeEdit.column.empty',
                    defaultMessage: '清空'
                })}</a>,
            dataIndex: 'productCategoryId',
            // fixed: 'right',
            width: FIXED_COLUMN_WIDTH,
            render: (text, record) => <a data-id={record.id} onClick={this.onDeleteDetail}>{formatMessage({
                id: 'modeEdit.column.delete',
                defaultMessage: '删除'
            })}</a>
        }];
        return (
            <div>
                <Modal
                    title={this.props.detail.id ? formatMessage({
                        id: 'modeEdit.modale.edit.title',
                        defaultMessage: '调查问题编辑'
                    }) : formatMessage({
                        id: 'modeEdit.modale.add.title',
                        defaultMessage: '调查问题新增'
                    })}
                    width="70%"
                    maskClosable={false}
                    onOk={this.onSubmit}
                    destroyOnClose={true}
                    confirmLoading={this.state.loading}
                    visible={this.props.showPanel}
                    onCancel={this.props.onCancel}>
                    <Form className="form-standard">
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.code',
                                        defaultMessage: '编号'
                                    })}
                                    {...formItemL}>
                                    {this.props.detail.id ? this.state.code
                                        : '尚未生成'}
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.questionContent',
                                        defaultMessage: '问题内容'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !this.state.questionContent ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="questionContent" autosize={autosize}
                                        value={this.state.questionContent} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.enQuestionContent ? 'error' : null}
                                    required
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.enQuestionContent',
                                        defaultMessage: '英语问题内容'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="enQuestionContent" autosize={autosize} type="textarea"
                                        value={this.state.enQuestionContent} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.esQuestionContent',
                                        defaultMessage: '西班牙语问题内容'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !this.state.esQuestionContent ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="esQuestionContent" autosize={autosize}
                                        value={this.state.esQuestionContent} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.ukQuestionContent ? 'error' : null}
                                    required
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.ukQuestionContent',
                                        defaultMessage: '乌克兰语问题内容'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="ukQuestionContent" autosize={autosize} type="textarea"
                                        value={this.state.ukQuestionContent} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.ruQuestionContent',
                                        defaultMessage: '俄罗斯语问题内容'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !this.state.ruQuestionContent ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="ruQuestionContent" autosize={autosize}
                                        value={this.state.ruQuestionContent} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.arQuestionContent ? 'error' : null}
                                    required
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.arQuestionContent',
                                        defaultMessage: '阿拉伯语问题内容'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="arQuestionContent" autosize={autosize} type="textarea"
                                        value={this.state.arQuestionContent} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.faQuestionContent',
                                        defaultMessage: '波斯语问题内容'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !this.state.faQuestionContent ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="faQuestionContent" autosize={autosize}
                                        value={this.state.faQuestionContent} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.description ? 'error' : null}
                                    required
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.description',
                                        defaultMessage: '描述'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="description" autosize={autosize} type="textarea"
                                        value={this.state.description} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.enDescription',
                                        defaultMessage: '英文描述'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !this.state.enDescription ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="enDescription" autosize={autosize}
                                        value={this.state.enDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.esDescription ? 'error' : null}
                                    required
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.esDescription',
                                        defaultMessage: '西班牙语描述'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="esDescription" autosize={autosize} type="textarea"
                                        value={this.state.esDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.ukDescription',
                                        defaultMessage: '乌克兰语描述'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !this.state.ukDescription ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="ukDescription" autosize={autosize}
                                        value={this.state.ukDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.ruDescription ? 'error' : null}
                                    required
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.ruDescription',
                                        defaultMessage: '俄罗斯语描述'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="ruDescription" autosize={autosize} type="textarea"
                                        value={this.state.ruDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.arDescription',
                                        defaultMessage: '阿拉伯语描述'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !this.state.arDescription ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="arDescription" autosize={autosize}
                                        value={this.state.arDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.faDescription ? 'error' : null}
                                    required
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.faDescription',
                                        defaultMessage: '波斯语描述'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="faDescription" autosize={autosize} type="textarea"
                                        value={this.state.faDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.form.isCheck',
                                        defaultMessage: '选项是否需要勾选'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !this.state.isCheck ? 'error' : null}
                                    required>
                                    <WrappedSelect
                                        allowClear
                                        name="isCheck"
                                        value={this.state.isCheck}
                                        options={isTorFList}
                                        onChange={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <Card
                        title={formatMessage({
                            id: 'modeEdit.operation.detail',
                            defaultMessage: '服务满意度调查问题选项清单'
                        })}>
                        <Button
                            type="dashed"
                            icon="plus"
                            block
                            className={styles.plusBtn}
                            onClick={this.onClickAddDetailBtn}>
                            {formatMessage({
                                id: 'modeEdit.operation.new',
                                defaultMessage: '新增'
                            })}
                        </Button>
                        <Table
                            className="white-space-nowrap"
                            columns={colums}
                            rowKey="id"
                            pagination={false}
                            dataSource={details}
                            expandedRowRender={record => <div>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.details.enOptionName',
                                        defaultMessage: '英文选项名称'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !record.enOptionName ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="enOptionName" autosize={autosize}
                                        value={record.enOptionName}
                                        onBlur={value => this.handleFilterDetailChange(value, 'enOptionName', record.id)} />
                                </FormItem>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.details.esOptionName',
                                        defaultMessage: '西班牙语选项名称'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !record.esOptionName ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="esOptionName" autosize={autosize}
                                        value={record.esOptionName}
                                        onBlur={value => this.handleFilterDetailChange(value, 'esOptionName', record.id)} />
                                </FormItem>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.details.ukOptionName',
                                        defaultMessage: '乌克兰语选项名称'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !record.ukOptionName ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="ukOptionName" autosize={autosize}
                                        value={record.ukOptionName}
                                        onBlur={value => this.handleFilterDetailChange(value, 'ukOptionName', record.id)} />
                                </FormItem>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.details.ruOptionName',
                                        defaultMessage: '俄罗斯语选项名称'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !record.ruOptionName ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="ruOptionName" autosize={autosize}
                                        value={record.ruOptionName}
                                        onBlur={value => this.handleFilterDetailChange(value, 'ruOptionName', record.id)} />
                                </FormItem>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.details.arOptionName',
                                        defaultMessage: '阿拉伯语选项名称'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !record.arOptionName ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="arOptionName" autosize={autosize}
                                        value={record.arOptionName}
                                        onBlur={value => this.handleFilterDetailChange(value, 'arOptionName', record.id)} />
                                </FormItem>
                                <FormItem
                                    label={formatMessage({
                                        id: 'modeEdit.modale.details.faOptionName',
                                        defaultMessage: '波斯语选项名称'
                                    })}
                                    {...formItemR}
                                    validateStatus={this.state.isValidate && !record.faOptionName ? 'error' : null}
                                    required>
                                    <TextInput type="textarea" name="faOptionName" autosize={autosize}
                                        value={record.faOptionName}
                                        onBlur={value => this.handleFilterDetailChange(value, 'faOptionName', record.id)} />
                                </FormItem>
                            </div>}
                            {...TABLE} />
                    </Card>

                </Modal>
            </div>
        );
    }
}

ModeEdit.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    showPanel: PropTypes.bool,
    onCancel: PropTypes.func,
    onSubmit: PropTypes.func
};
export default injectIntl(ModeEdit);
